<template>
    <div>
        <h2>toRaw和markRaw</h2>
        <h3>state：{{state}}</h3>
        <hr>
        <button @click="testToRaw">测试testToRaw</button>
        <button @click="testMarkRaw">测试markRaw</button>
    </div>
</template>
<script lang="ts">
import { defineComponent, markRaw, reactive, toRaw } from 'vue'
interface UserInfo {
    name: string;
    age: number,
    likes?:string[]
}
export default defineComponent({
    name: 'App',
    setup() {
        const state = reactive<UserInfo>({
            name: '小明',
            age: 20
        })
        const testMarkRaw = () => {
            console.log('测试MarkRaw')
            // state.likes = ['吃','喝']
            // state.likes[0] = '吃零食'
            // console.log(state)
            const likes = ['吃', '喝']
            // markRaw标记的对象数据，不能再成为代理对象了
            state.likes = markRaw(likes)
            setInterval(() => {
                if (state.likes) {
                    state.likes[0] += '='
                }
                
            }, 2000)
            console.log(state)
        };
        const testToRaw = () => {
            console.log('测试ToRaw')
            // 把代理对象变成了普通对象了，数据变化，界面不变化
            const user = toRaw(state)
            user.name = '小红'
            console.log('user:', user)
        };
        return {
            testToRaw,
            testMarkRaw,
            state
        }
    },
})
</script>
<style>
</style>